<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>CSS Switch 开关</title>
  <style>
    :root{
      --track-off: #d1d5db; /* 灰 300 */
      --track-on: #22c55e;  /* 绿 500 */
      --thumb: #ffffff;
      --ring: rgba(59,130,246,.5); /* 蓝 500 半透明 */
      --disabled: #e5e7eb; /* 灰 200 */
    }

    @media (prefers-color-scheme: dark){
      :root{
        --track-off: #374151; /* 灰 700 */
        --track-on: #16a34a;  /* 绿 600 */
        --thumb: #f9fafb;     /* 灰 50 */
        --disabled: #4b5563;  /* 灰 600 */
      }
      body{background:#0b0f14;color:#e5e7eb}
    }

    *{box-sizing:border-box}
    body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; margin:0; padding:32px; line-height:1.6; background:#f7fafc; color:#111827}
    h1{font-size:20px; margin:0 0 16px}
    .row{display:flex; align-items:center; gap:16px; margin:12px 0}

    /* 可复用的开关组件 */
    .switch{
      --w: 44px;   /* 默认宽度 */
      --h: 24px;   /* 默认高度 */
      --p: 3px;    /* 轨道内边距（影响拇指直径）*/
      position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none;
    }

    /* 不可见但可访问的 checkbox */
    .switch__input{
      position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:inherit;
    }

    .switch__track{
      width:var(--w); height:var(--h); border-radius:9999px; background:var(--track-off); position:relative; transition: background .2s ease, box-shadow .2s ease; flex:0 0 auto;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
    }

    .switch__thumb{
      position:absolute; top:var(--p); left:var(--p);
      width: calc(var(--h) - var(--p) * 2); height: calc(var(--h) - var(--p) * 2);
      background: var(--thumb); border-radius:50%;
      transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.1);
      will-change: transform;
    }

    /* 选中状态 */
    .switch__input:checked + .switch__track{ background: var(--track-on); }
    .switch__input:checked + .switch__track .switch__thumb{ transform: translateX(calc(var(--w) - var(--h))); }

    /* 聚焦可见态（键盘可达性） */
    .switch__input:focus-visible + .switch__track{
      box-shadow: 0 0 0 3px var(--ring);
    }

    /* 禁用 */
    .switch[aria-disabled="true"],
    .switch:has(.switch__input:disabled){ cursor:not-allowed; opacity:.6; }
    .switch:has(.switch__input:disabled) .switch__track{ background:var(--disabled); }

    /* 尺寸变体 */
    .switch[data-size="sm"]{ --w: 34px; --h: 18px; --p: 2px; }
    .switch[data-size="md"]{ --w: 44px; --h: 24px; --p: 3px; }
    .switch[data-size="lg"]{ --w: 56px; --h: 32px; --p: 4px; }

    /* 带文字的布局 */
    .label{font-size:14px; opacity:.9}
  </style>
</head>
<body>
  <h1>纯 CSS Switch 开关</h1>

  <div class="row">
    <label class="switch" data-size="md">
      <input class="switch__input" type="checkbox" />
      <span class="switch__track">
        <span class="switch__thumb"></span>
      </span>
      <span class="label">默认</span>
    </label>
  </div>

  <div class="row">
    <label class="switch" data-size="sm">
      <input class="switch__input" type="checkbox" />
      <span class="switch__track"><span class="switch__thumb"></span></span>
      <span class="label">小号 (sm)</span>
    </label>

    <label class="switch" data-size="lg">
      <input class="switch__input" type="checkbox" checked />
      <span class="switch__track"><span class="switch__thumb"></span></span>
      <span class="label">大号 (lg)</span>
    </label>
  </div>

  <div class="row">
    <label class="switch" data-size="md">
      <input class="switch__input" type="checkbox" disabled />
      <span class="switch__track"><span class="switch__thumb"></span></span>
      <span class="label">禁用</span>
    </label>
  </div>

  <div class="row">
    <label class="switch" data-size="md">
      <input class="switch__input" type="checkbox" id="sync" />
      <span class="switch__track"><span class="switch__thumb"></span></span>
      <span class="label">和系统暗色模式一起用</span>
    </label>
  </div>

  <p style="font-size:13px;opacity:.7;margin-top:24px">无 JS，checkbox 原生可访问；支持键盘 Tab 聚焦和空格切换；可通过 <code>data-size</code> 快速改尺寸。</p>
</body>
</html>
